<script setup lang="ts">
const props = defineProps({
  query: Function
});

import { FormInstance, FormRules } from "element-plus";
import { reactive } from "vue";
import { ref } from "vue";
import {
  FlowableProcessDefineDTO,
  processDefineBaseSave,
  processDefineBaseUpdate,
  processDefineBaseInfo
} from "@/api/flowable";
import { Result } from "@/api";

const dialogVisible = ref<boolean>();

const form = ref<FlowableProcessDefineDTO>();

const initForm = () => {
  form.value = {
    id: null,
    processName: "",
    processApi: "",
    businessApi: "",
    businessType: ""
  };
};

const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  processName: [
    { required: true, message: "请输入流程名称", trigger: "blur" },
    { min: 1, max: 64, message: "字符长度在 1 to 64", trigger: "blur" }
  ],
  processApi: [
    { required: true, message: "请输入流程api", trigger: "blur" },
    { min: 1, max: 32, message: "字符长度在 1 to 32", trigger: "blur" }
  ],
  businessApi: [
    { required: true, message: "请输入业务表单对象", trigger: "blur" }
  ],
  businessType: [
    { required: true, message: "请输入业务表单对象类型", trigger: "blur" }
  ]
});

const handleClose = () => {
  dialogVisible.value = false;
  initForm();
  ruleFormRef?.value?.resetFields();
};

const open = async (id: string | undefined) => {
  if (id) {
    const res = await processDefineBaseInfo({ id });
    if (res.success) {
      form.value = res.data;
      dialogVisible.value = true;
    }
  } else {
    initForm();
    dialogVisible.value = true;
  }
};

const submitForm = async () => {
  await ruleFormRef?.value?.validate(async valid => {
    if (valid) {
      let res: Result<null>;
      if (form?.value?.id) {
        res = await processDefineBaseUpdate(form.value);
      } else {
        res = await processDefineBaseSave(form.value);
      }
      if (res.success) {
        handleClose();
        // 刷新父页面
        props.query();
      }
      console.log("submit!");
    }
  });
};

const resetForm = () => {
  initForm();
  ruleFormRef?.value?.resetFields();
};

defineExpose({
  open
});
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加/修改流程"
    width="40%"
    :before-close="handleClose"
  >
    <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="流程名称" prop="processName">
        <el-input v-model="form.processName" />
      </el-form-item>
      <el-form-item label="流程api" prop="processApi">
        <el-input v-model="form.processApi" />
      </el-form-item>
      <el-form-item label="业务对象" prop="businessApi">
        <el-input v-model="form.businessApi" />
      </el-form-item>
      <el-form-item label="业务对象类型" prop="businessType">
        <el-input v-model="form.businessType" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style></style>
